<template>
  <div>
    <a-form ref="queryNoticeFormRef" name="queryNoticeForm" :model="queryNoticeForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
      <a-row :gutter="24">
        <a-col span="8">
          <a-form-item name="noticeTitle" label="公告标题">
            <a-input v-model:value="queryNoticeForm.data.noticeTitle" allowClear></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="noticeType" label="公告类型">
            <a-select v-model:value="queryNoticeForm.data.noticeType" :options="pageData.sysNoticeTypeDict" allowClear> </a-select>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item name="createBy" label="创建者">
            <a-input v-model:value="queryNoticeForm.data.createBy" allowClear></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" class="autoee-button-row">
        <a-col :span="12" style="text-align: left">
          <a-button type="primary" @click="openNoticeAddModal()" v-hasPermi="['system:notice:add']"><AutoeeIcon icon="plus-outlined" />新增</a-button>
          <a-button type="primary" danger @click="clickDeleteNotice()" :disabled="noticeTableData.selectedRowKeys.length <= 0" v-hasPermi="['system:notice:remove']"><AutoeeIcon icon="delete-outlined" />删除</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="noticeTablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
          <a-button @click="resetNoticeQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      rowKey="noticeId"
      :columns="noticeTableData.columns"
      :data-source="noticeTableData.dataSource"
      :loading="noticeTablePage.loading.value"
      :pagination="noticeTablePagination"
      @change="noticeTableHandChangePage"
      :row-selection="{ selectedRowKeys: noticeTableData.selectedRowKeys, onChange: onNoticeTableSelectChange }"
      bordered
      size="small"
      tableLayout="fixed"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.key === 'pageIndex'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'noticeType'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.noticeType, pageData.sysNoticeTypeDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ AutoeeUtil.getDictLabelByKey(record.status, pageData.sysNoticeStatusDict) }}
          </span>
        </template>
        <template v-else-if="column.key === 'noticeTableOperateCol'">
          <span>
            <a @click="openNoticeDetailModal(record)"> 查看 </a>
            <a-divider type="vertical" v-hasPermi="['system:notice:edit']" />
            <a @click="openNoticeUpdateModal(record)" v-hasPermi="['system:notice:edit']"> 修改 </a>
          </span>
        </template>
      </template>
    </a-table>

    <NoticeAddUpdateModal ref="noticeAddUpdateModalRef" :sysNoticeTypeDict="pageData.sysNoticeTypeDict" :sysNoticeStatusDict="pageData.sysNoticeStatusDict" />
    <NoticeDetailModal ref="noticeDetailModalRef" :sysNoticeTypeDict="pageData.sysNoticeTypeDict" :sysNoticeStatusDict="pageData.sysNoticeStatusDict" />
  </div>
</template>

<script setup name="Notice">
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice';
import NoticeAddUpdateModal from './addUpdateModal.vue';
import NoticeDetailModal from './detailModal.vue';
import { computed, reactive, ref } from 'vue';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { message } from 'ant-design-vue';

// 当前页面使用的数据
const pageData = reactive({
  sysNoticeTypeDict: [],
  sysNoticeStatusDict: [],
});

AutoeeUtil.getDictsByType('sys_notice_type').then((res) => {
  pageData.sysNoticeTypeDict = res;
});
AutoeeUtil.getDictsByType('sys_notice_status').then((res) => {
  pageData.sysNoticeStatusDict = res;
});

// 查询Form
const queryNoticeFormRef = ref();
const queryNoticeForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetNoticeQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryNoticeForm.data);
  noticeTablePage.reload();
};

// 打开新增窗口
const noticeAddUpdateModalRef = ref();
const openNoticeAddModal = () => {
  noticeAddUpdateModalRef.value.openAddModal(noticeTablePage);
};

// 打开修改窗口
const openNoticeUpdateModal = (record) => {
  noticeAddUpdateModalRef.value.openUpdateModal(record, noticeTablePage);
};

// 打开详细窗口
const noticeDetailModalRef = ref();
const openNoticeDetailModal = (record) => {
  noticeDetailModalRef.value.openModal(record);
};

// 点击删除
const clickDeleteNotice = () => {
  AutoeeUtil.confirmDeleteSelectedData(() => {
    delNotice(noticeTableData.selectedRowKeys).then((res) => {
      AutoeeUtil.messageSuccess('删除操作成功。');
      noticeTablePage.reload();
    });
  });
};

// 列表数据
const noticeTableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '公告标题',
      key: 'noticeTitle',
      dataIndex: 'noticeTitle',
    },
    {
      title: '公告类型',
      key: 'noticeType',
      dataIndex: 'noticeType',
    },
    {
      title: '公告状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '创建者',
      key: 'createBy',
      dataIndex: 'createBy',
    },
    {
      title: '操作',
      key: 'noticeTableOperateCol',
      width: 100,
    },
  ],
});

// 查询用户列表
const queryNoticeList = () => {
  return listNotice(queryNoticeForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const noticeTablePage = AutoeeUtil.usePagination(queryNoticeList, noticeTableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const noticeTablePagination = computed(() => AutoeeUtil.getTablePagination(noticeTablePage));

// 手动翻页方法
const noticeTableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(noticeTablePage, page, filters, sorter);
};

// 列表选中方法
const onNoticeTableSelectChange = (selectedRowKeys, selectedRows) => {
  noticeTableData.selectedRowKeys = selectedRowKeys;
  // console.log('selectedRows[0].dictType=' + JSON.stringify(selectedRows[0].dictType));
};
</script>
<style lang="less"></style>
